// 引入一个包
const path = require("path");
// webpack5不需要了
// const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");

// webpack 中的所有配置信息都应该写在 module.exports 中
module.exports = {
  // 指定入口文件
  entry: "./src/index.ts",
  mode: "production",

  // 指定打包文件所在的目录
  output: {
    // 打包前先清除之前的打包文件
    clean: true,
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    environment: {
      // 告诉 webpack 不使用箭头函数
      arrowFunction: false,
    },
  },

  // 指定 webpack 打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定的是规则生效的文件
        test: /\.ts$/,
        // 要排除的文件
        exclude: /node_modules/,
        // 要使用的loader
        // use: "ts-loader",
        use: [
          // 配置babel
          {
            // 指定加载器
            loader: "babel-loader",
            // 设置 babel
            options: {
              // 设置预定义的环境
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 指定 corejs 的版本
                    corejs: 3,
                    // 使用 corejs 的方式 "usage"表示 按需加载
                    useBuiltIns: "usage",
                    // 要兼容的目标浏览器
                    targets: {
                      chrome: "58",
                      ie: "11",
                    },
                  },
                ],
              ],
            },
          },
          "ts-loader",
        ], // 后面的先执行
      },
    ],
  },

  // 配置 webpack 插件
  plugins: [
    // new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      // title: "这是一个自定义的 title",
      template: "./src/index.html",
    }),
  ],

  // 告诉 webpack 哪些文件可以作为模块被引入
  resolve: {
    extensions: [".ts", ".js"],
  },
};
